<template>
	<div class="section">
		<div 
			v-if="title && title.length > 0" 
			class="section-header">
			<div 
				:style="{ 'border-left-color': mColor }" 
				class="section-mark" />
			<div class="section-title">{{ title }}</div>
			<flexbox 
				v-if="showF" 
				class="f-container">
				<div 
					v-for="(item, index) in fItems" 
					:key="index" 
					:class="{ 'f-item-select':fIndex==item.type }"
					class="f-item" 
					@click="fClick(item)">{{ item.title }}</div>
			</flexbox>
			
			
			<div v-if="crmType == 'lawcase'" style="position: absolute;right:0;top:5px">
				<el-popover
					placement="left"
					v-model="visible">
					<p style="line-height: 20px;">
						请选择案件类型
					</p>
					<div style="text-align: right;margin-top: 15px;">
						<el-button 
							size="mini" 
							@click="clickBtn('zixun')">非诉咨询</el-button>
						<el-button 
							size="mini" 
							@click="clickBtn('fuwu')">非诉服务</el-button>
						<el-button
							size="mini" 
							@click="clickBtn('susong')">诉讼案件</el-button>
						<el-button
							size="mini" 
							@click="clickBtn('xingshi')">刑事案件</el-button>
					</div>
					<el-button
						type="primary" 
						size="mini"  
						slot="reference">添加</el-button>
				</el-popover>
			</div>
			
			<div v-else>
				<el-button
					v-if="showSave"
					style="position: absolute;right:0;top:5px"
					type="primary" 
					size="mini"
					@click="handleAction()">添加</el-button>
			</div>		
				
				
		</div>
		<div :style="{ 'height': contentHeight }" class="content">
			<el-empty
				v-if="showNoData"
				description="暂无数据"></el-empty>
			<slot />
		</div>
	</div>
</template>
<script type="text/javascript">
	export default {
		name: 'Sections',
		components: {},
		props: {
			title: {
				type: String,
				default: ''
			},
			mColor: {
				type: String,
				default: '#FF6767'
			},
			/** 内容区域固定高度 */
			contentHeight: {
				type: String,
				default: '327px'
			},
			/** 展示客户工作台  重要提醒 时间筛选 */
			showF: {
				type: Boolean,
				default: false
			},
			fItems: {
				type: Array,
				default: () => {
					return []
				}
			},
			/** 展示无数据 */
			showNoData: {
				type: Boolean,
				default: false
			},
			/** 展示添加按钮 */
			showSave: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: ''
			},
			crmType: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				fIndex: -1,
				addConsultDialog:false,
				visible:false,
			}
		},
		computed: {},
		mounted() {},
		methods: {
			fClick(item) {
				this.fIndex = item.type
				this.$emit('f-click', 'val')
			},
			
			handleAction(){
				this.$emit("save",{"type":this.type})
			},
			
			clickBtn(type){
				this.addConsultDialog = true
				this.$emit("save",{"type":type})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.section {
		position: relative;
		background-color: white;
		margin-top: 8px;
	}

	.section:first-child {
		margin-top: 10px;
	}

	.section-mark {
		border-left-width: 3px;
		border-left-style: solid;
		height: 10px;
	}

	.section-header {
		display: flex;
		align-items: center;
		padding:10px 15px;
	}

	.section-title {
		font-size: 13px;
		color: #333;
		margin-left: 8px;
		flex-shrink: 0;
		font-weight: bold;
	}

	.f-container {
		width: auto;
		margin-left: 40px;

		.f-item {
			padding: 2px 4px;
			font-size: 12px;
			margin-right: 10px;
			color: #666;
		}

		.f-item-select {
			border-radius: 2px;
			background-color: #ff6767;
			color: white;
		}
	}

	.content {
		overflow: auto;

		.no-data-container {
			text-align: center;

			.no-data {
				margin-top: 30px;
			}

			.no-data-name {
				font-size: 12px;
				margin-top: 8px;
				color: #666;
			}
		}
	}
</style>
